<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="/Public/BeginnerAdmin/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/Public/BeginnerAdmin/plugins/font-awesome/css/font-awesome.min.css">
</head>

<body>
<div style="margin: 15px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>图片懒加载</legend>
    </fieldset>
    <ul id="demo">
        <?php if(is_array($data)): $key = 0; $__LIST__ = $data;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$v): $mod = ($key % 2 );++$key;?><li><img src="<?php echo ($v["pic"]); ?>" width="300px" height="400px" /></li><?php endforeach; endif; else: echo "" ;endif; ?>
        <button>加载更多</button>
    </ul>
    <!--<input type="hidden" value="1" id="page" />-->

</div>
<script type="text/javascript" src="/Public/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Public/jquery/jquery.form.js"></script>
<script src="/Public/layui/dist/layui.all.js"></script>
<script>
    function ajaxCall()
    {
        window.parent.location.href=window.parent.location.href;
    }

</script>
<script>
    layui.use('flow', function(){
        var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
        var flow = layui.flow;
        $('button').on('click',function(){
            flow.load({
                elem: '#demo' //指定列表容器
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    $.get('/home/article/layimg_callback?page='+page, function(res){
                        //假设你的列表返回在data集合中
                        layui.each(res.data, function(index, item){
                            lis.push('<li><img lay-src='+ item.pic  +'/></li>');
                        });

                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < res.pages);
                    });
                }
            });

        });

    });
</script>

</body>

</html>